import React, { memo, useCallback, useState } from 'react'

function PageA (props) {
	const { onClick1, children } = props
	console.log('PageA', 'render')
	return <div onClick={onClick1}>{children}</div>
}

function PageB ({ onClick, name }) {
	console.log('PageB', 'render')
	return <div onClick={onClick}>PageB:{name}</div>
}

function PageC ({ onClick, name }) {
	console.log('PageC', 'render')
	return <div onClick={onClick}>PageC:{name}</div>
}

const PageD = memo(PageC)

function UseMemo05() {
	const [a, setA] = useState(11)
	const [b, setB] = useState(22)
	const [c, setC] = useState(33)
	//点击会同时更新A,B
	const handleClick1 = () => {
		setA(a + 1)
	}
	//点击会同时更新A,B
	const handleClick2 = () => {
		setB(b + 1)
	}
	//点击会同时更新A,B,C
	const handleClick3 = useCallback(() => {
		setC(c + 1)
	}, [c])

	return (
		<>
			<PageA onClick1={handleClick1}>PageA:{a}</PageA>
			<PageB onClick={handleClick2} name={b}></PageB>
			<PageD onClick={handleClick3} name={c}></PageD>
		</>
	)
}

export default UseMemo05